<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' :title="title?title:'添加模板'" top="8vh" :visible.sync="dialogVisible" @close="resetForm()" width="800px">
        <div class="free_box flexbox">
            <div class="free_left flex">
                <div class="free_title">添加品牌</div>
                <div class="model_title">模板名称</div>
                <div class="model_name">
                    <el-input v-model="queryInfo.template_name" placeholder="请设置模板名称"></el-input>
                </div>
                <div class="free_text flexbox flexcenter flexbetween">
                    选择品牌
                    <el-input style="width:240px" size="small" placeholder="请输入品牌名称查询" suffix-icon="el-icon-search" clearable v-model="searchValue">
                    </el-input>
                </div>
                <div class="video_list">
                    <template v-if="brandList.length>0">
                        <div class="video_item flexbox flexcenter" v-for="item in filteredData(searchValue,brandList,'brand_name')" :key="item.id">
                            <el-checkbox v-model="item.checked" class="video_check" @change="selectBrand(item)"></el-checkbox>
                            <div class="video_right">
                                <div class="video_name">{{item.brand_name}}</div>
                                <div class="video_id">品牌标识ID：{{item.brand_id}}</div>
                            </div>
                        </div>
                    </template>
                    <div v-else class="flexbox flexcenter flexcolumn flexjust" style="height:100%">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">请先选择品牌</div>
                    </div>
                </div>
            </div>
            <div class="free_right flex">
                <div class="free_title">已添加品牌</div>
                <div class="has_video">
                    <template v-if="hasList.length>0">
                        <div class="has_item flexbox flexcenter" v-for="(item,index) in hasList" :key="item.video_id">
                            <div class="has_left flex">
                                <div class="video_name">{{item.brand_name}}</div>
                                <div class="video_id">品牌标识ID：{{item.brand_id}}</div>
                            </div>
                            <svg class="has_close" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" @click="deleteBrand(item,index)">
                                <path d="M8.28772 8.2876L15.7123 15.7122" stroke="#B4B7BD" stroke-width="1.5" stroke-linecap="round" />
                                <path d="M8.28772 15.7122L15.7123 8.28754" stroke="#B4B7BD" stroke-width="1.5" stroke-linecap="round" />
                            </svg>
                        </div>
                    </template>
                    <div v-else class="flexbox flexcenter flexcolumn flexjust" style="height:100%">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂未添加品牌</div>
                    </div>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm()" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm()" :loading="loading" :disabled="loading" class="el-button-width">保 存</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            dialogVisible: false,
            searchValue: "",
            queryInfo: {
                template_name: "",
                template_brand: [],
            },
            hasList: [],
            brandList:[],
        };
    },
    created() {
        
    },
    beforeDestroy() {},
    methods: {
        //获取品牌
        async getBrandList() {
            const { data: res } = await this.$http.post(
                "fxdata/fxboard/brandList",{
                    page:1,
                    limit:1000,
                    state:1
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                let list = res.data.map((item) => {
                    item.checked = false;
                    return item;
                });
                this.brandList = list
            }
        },
       
        // 筛选
        filteredData(query, list, name) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item[name].indexOf(query) !== -1) {
                    return item;
                }
            });
            return list;
        },

        // 选择
        selectBrand(item) {
            if (item.checked == true) {
                this.hasList.push(item);
            } else {
                let index = this.hasList.findIndex(
                    (val) => val.brand_id == item.brand_id
                );
                this.hasList.splice(index, 1);
            }
        },

        // 删除
        deleteBrand(item, index) {
            this.hasList.splice(index, 1);
            let index2 = this.brandList.findIndex(
                (val) => val.brand_id == item.brand_id
            );
            if (index2 != -1) {
                this.brandList[index2].checked = false;
            }
        },

        //保存
        async submitForm() {
            this.queryInfo.template_brand = this.hasList.map((item) => {
                return item.brand_id;
            });
            if(!this.queryInfo.template_name){
                this.$message.error("请先输入模板名称！");
                return;
            }
            else if (this.queryInfo.template_brand.length == 0) {
                this.$message.error("请先选择品牌！");
                return;
            }
            this.loading = true;
            const { data: res } = await this.$http.post(
                "fxdata/fxboard/templateAdd",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.$message({
                    message: "添加成功",
                    type: "success",
                });
                this.$emit("getModelList");
                this.resetForm();
            }
        },

        resetForm() {
            this.queryInfo.template_name = "";
            this.brandList = [];
            this.hasList = []
            this.dialogVisible = false;
        },
    },
    components: {},
};
</script>


<style scoped>
.free_box {
    margin: -20px -20px -10px -20px;
    position: relative;
    border-bottom: 1px solid #ebebeb;
    overflow: hidden;
}
.model_title{
    font-size: 14px;
    color: #17233D;
    line-height: 20px;
    margin-top: 20px;
    padding: 0 20px;
}
.model_name{
    padding: 12px 20px 20px 20px;
}
.free_box::after {
    content: "";
    position: absolute;
    height: 100%;
    border-left: 1px solid #ebebeb;
    left: 50%;
    top: 0;
}
.free_title {
    height: 61px;
    line-height: 61px;
    padding: 0 20px;
    font-size: 16px;
    color: #17233d;
    border-bottom: 1px solid #ebebeb;
}
.free_text {
    margin: 4px 20px 10px;
    font-size: 14px;
    color: #17233d;
}
.video_list {
    height: 408px;
    overflow: auto;
    padding: 0 20px;
}
.video_item {
    border: 1px solid #ebebeb;
    border-radius: 4px;
    padding: 12px 20px;
    margin-bottom: 12px;
}
.video_right {
    margin-left: 12px;
}
.video_check {
    flex-shrink: 0;
}
.video_name {
    font-size: 14px;
    line-height: 20px;
    color: #17233d;
    height: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.video_id {
    font-size: 13px;
    line-height: 18px;
    color: #b4b7bd;
    margin-top: 8px;
}
.has_video {
    padding: 20px 20px 0;
    overflow: auto;
    height: 500px;
}
.has_item {
    padding: 12px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    margin-bottom: 12px;
}
.has_left {
    margin-right: 12px;
}
.has_close {
    cursor: pointer;
}
</style>
